<template>
  <div id="app" style="overflow-x: auto">
    <!-- 数据统计板块 -->
    <div class="data-stats">
      <div class="header">数据统计</div>
      <div class="data-stats-context">
        <div class="stat-box">
          集群数量：{{ clusterNumber }}
          <!--          <div class="stat-number">{{ clusterNumber }}</div>-->
        </div>
        <div class="stat-box">
          用户数量：{{ userNumber }}
          <!--          <div class="stat-number">{{ userNumber }}</div>-->
        </div>
        <div class="stat-box">
          租户数量：{{ tenantNumber }}
          <!--          <div class="stat-number">{{ tenantNumber }}</div>-->
        </div>
      </div>
    </div>

    <!-- 列表板块 -->
    <div class="list-section">
      <!-- <el-row> -->
      <!-- <el-col :span="12"> -->
      <div class="left">
        <div class="left-list">
          <div class="header">集群资源TOP5</div>
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
            :data="clusterData"
            max-height="14.375rem"
            class="tableBox"
            :row-style="{ height: '2.25rem' }"
            :cell-style="{ padding: '0' }"
          >
            <el-table-column prop="clusterName" label="名称">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.clusterName"
                  placement="bottom"
                  popper-class="myTooltipClass"
                  :disabled="isShowTooltip"
                >
                  <div class="descSpan" @mouseover="onMouseOver($event)">
                    {{ scope.row.clusterName }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="clusterUrl" label="地址" width="120">
            </el-table-column>
            <el-table-column prop="clusterCpu" label="CPU(核)" width="100">
            </el-table-column>
            <el-table-column prop="clusterMem" label="内存(GB)" width="100">
              <template slot-scope="scope">
                <span>
                  {{ (scope.row.clusterMem / 1024).toFixed(1) }}
                </span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="pod" label="pod" width="100rem">
                </el-table-column> -->
            <el-table-column label="描述">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.clusterDescription"
                  placement="bottom"
                  popper-class="myTooltipClass"
                  :disabled="isShowTooltip"
                >
                  <div class="descSpan" style="text-align: left" @mouseover="onMouseOver($event)">
                    {{ scope.row.clusterDescription }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="创建时间" width="180rem">
            </el-table-column>
          </el-table>
        </div>
        <div class="left-list">
          <div class="header">租户分配资源TOP5</div>
          <el-table
            ref="multipleTable"
            tooltip-effect="dark"
            style="width: 100%"
            :data="tenantData"
            max-height="14.375rem"
            :row-style="{ height: '2.25rem' }"
            :cell-style="{ padding: '0' }"
          >
            <el-table-column prop="tenantName" label="租户名">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.tenantName"
                  placement="bottom"
                  popper-class="myTooltipClass"
                  :disabled="isShowTooltip"
                >
                  <div class="descSpan" @mouseover="onMouseOver($event)">
                    {{ scope.row.tenantName }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="集群" width="120">
              <template slot-scope="scope">
                <div class="descSpan">
                  {{ scope.row.clusterZhname }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="tenantCpu" label="CPU(核)" width="100">
            </el-table-column>
            <el-table-column prop="tenantMem" label="内存(GB)" width="100">
              <template slot-scope="scope">
                <span v-if="(scope.row.tenantMem / 1024).toFixed(1).endsWith('0')">
                  {{ (scope.row.tenantMem / 1024) }}
                </span>
                <span v-else>
                  {{ (scope.row.tenantMem / 1024).toFixed(1) }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="描述" style="text-align: left">
              <template slot-scope="scope">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.tenantDescription"
                  placement="bottom"
                  popper-class="myTooltipClass"
                  :disabled="isShowTooltip"
                >
                  <div class="descSpan" style="text-align: left" @mouseover="onMouseOver($event)">
                    {{ scope.row.tenantDescription }}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="创建时间" width="180rem">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- </el-col> -->
      <!-- <el-col :span="12"> -->
      <div class="right">
        <div class="right-chart">
          <!-- ECharts 圆形图组件 -->
          <div class="header">用户类别</div>
          <div ref="pieChart" class="pie-chart"></div>
        </div>
        <!-- 快捷导航板块 -->
        <div class="quick-nav">
          <div class="header">快捷导航</div>
          <div class="quick-nav-context">
            <button @click="navigateToCluster">集群管理</button>
            <button @click="navigateToTenant">租户管理</button>
            <button @click="navigateToUser">用户管理</button>
          </div>
        </div>
      </div>
      <!-- </el-col> -->
      <!-- </el-row> -->
    </div>
  </div>
</template>

<script>
  import {router} from "@/router";

  export default {
    data() {
      return {
        clusterData: [],
        tenantData: [],
        clusterNumber: "",
        userNumber: "",
        tenantNumber: "",
        userTypeInfo: {
          administrator: 0,
          developer: 0,
          operator: 0,
        },
        isShowTooltip: false,
      };
    },
    methods: {
      getResourceInfo() {
        this.$clusterManageApi.getAllResourceInfo().then((res) => {
          if (res && res.code === 200) {
            this.clusterNumber = res.data.clusterLong;
            this.userNumber = res.data.userLong;
            this.tenantNumber = res.data.tenantLong;
            if (res.data.gvKubeClusterList.length <= 5) {
              this.clusterData = res.data.gvKubeClusterList;
            } else {
              this.clusterData = res.data.gvKubeClusterList.slice(0, 5);
            }
            if (res.data.gvKubeTenantList.length <= 5) {
              this.tenantData = res.data.gvKubeTenantList;
            } else {
              this.tenantData = res.data.gvKubeTenantList.slice(0, 5);
            }
            // this.tenantData = res.data.gvKubeTenantList
            this.userTypeInfo.administrator = res.data.userAdminLong;
            this.userTypeInfo.developer = res.data.userDeveloperLong;
            this.userTypeInfo.operator = res.data.userOperatorLong;
            this.initUserType();
          }
        });
      },
      navigateToCluster() {
        this.$router.push({name: "ClusterManage"});
      },
      navigateToUser() {
        this.$router.push({name: "UserManage"});
      },
      navigateToTenant() {
        this.$router.push({name: "TenantManage"});
      },
      onMouseOver(event) {
        const ev = event.target;
        const evWeight = ev.scrollWidth;
        const contentWidth = ev.clientWidth;
        if (evWeight > contentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      },
      initUserType() {
        // 基于准备好的dom，初始化echarts实例
        const myChart = this.$echarts.init(this.$refs.pieChart);
        // 指定图表的配置项和数据
        const option = {
          tooltip: {
            trigger: "item",
          },
          legend: {
            top: "92%",
            left: "center",
          },
          series: [
            {
              name: "用户类别",
              type: "pie",
              radius: ["45%", "75%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center",
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 40,
                  fontWeight: "bold",
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                {value: this.userTypeInfo.administrator, name: "管理员用户"},
                {value: this.userTypeInfo.developer, name: "开发者用户"},
                {value: this.userTypeInfo.operator, name: "运维者用户"},
              ],
            },
          ],
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
    },
    mounted() {
      this.getResourceInfo();
    },
  };
</script>

<style scoped lang="scss">
  /* 基本布局和样式 */
  body,
  html {
    margin: 0;
    padding: 0;
    font-family: "Arial", sans-serif;
    width: 100%;
    height: 100%;
  }

  #app {
    display: flex;
    flex-direction: column;
    // margin: ;
    padding: 0.625rem 1.25rem 1.25rem 1.25rem;
    width: 100%;
    height: 100%;
    background-color: #eff4f9;
    justify-content: space-around;
  }

  /* .tableBox>th {
        padding: 0 !important;
        height: 30px;
        line-height: 30px;
        padding: 0;
      }

      .tableBox>td {
        padding: 0 !important;
        height: 30px;
        line-height: 30px;
        padding: 0;
      } */

  .el-table td,
  .el-table th {
    padding: 0.125rem;
  }

  /* 数据统计板块 */
  .data-stats {
    flex: 1;
    // border: 0.0625rem solid #ccc;
    background-color: #fff;
    /* 添加边框 */
    padding: 0.625rem;
    margin-top: 1rem;
    border-radius: 0.25rem;
    /* 添加圆角 */
  }

  .data-stats .header {
    display: flex;
    flex-wrap: wrap;
    font-weight: bold;
    font-size: 1.125rem;
    /* 增加距离 */
  }

  .data-stats .data-stats-context {
    display: flex;
    justify-content: space-evenly;
    //align-items: space-between;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .stat-box {
    width: 18.75rem;
    height: 3.125rem;
    background-color: #eff4f9;
    padding: 0.85rem;
    text-align: center;
    border-radius: 0.25rem;
    margin-right: 1.875rem;
    border: 1px solid #cccccc;
  }

  .stat-number {
    // font-size: 14px;
    // font-weight: bold;
  }

  /* 列表板块 */
  /* 整个大盒子的样式 */
  .list-section {
    display: flex;
  }

  /* 左边盒子的样式 */
  .left {
    flex: 3;
    display: flex;
    flex-direction: column;
    align-items: normal;
  }

  /* 右边盒子的样式 */
  .right {
    flex: 1;
    /* 占据另一半空间 */
    display: flex;
    align-items: center;
    /* 垂直居中 */
    // justify-content: center;
    /* 水平居中 */
    flex-wrap: wrap;
    flex-direction: column;
    // width: 34rem;
  }

  .left-list {
    margin-top: 2rem;
    background-color: #fff;
    height: 270px;
    width: 95%;
    padding: 0.625rem;
    border-radius: 0.25rem;
  }

  .left-list .header {
    font-weight: bold;
    font-size: 1.125rem;
  }

  .right-chart {
    flex: 2;
    margin: 2rem 0;
    width: 35rem;
    background-color: #fff;
  }

  .right-chart .header {
    font-weight: bold;
    font-size: 1.125rem;
    margin-top: 1.25rem;
    margin-left: 1.25rem;
    /* 增加距离 */
  }

  .right-chart .pie-chart {
    width: 100%;
    height: 100%;
    margin-top: -15px;
  }

  /* 快捷导航板块 */
  .quick-nav {
    flex: 1;
    // border: 0.0625rem solid #ccc;
    // margin: 0 2rem;
    width: 570px;
    height: auto;
    background-color: #fff;
    /* 添加边框 */
    padding: 0.625rem;
    border-radius: 0.25rem;
    /* 添加圆角 */
  }

  .quick-nav .header {
    font-weight: bold;
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
    text-align: left;
    /* 左对齐 */
  }

  .quick-nav .quick-nav-context {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 60%;
  }

  .quick-nav button {
    width: 10.25rem;
    background-color: #eff4f9;
    //border: none;
    padding: 1.25rem 1.25rem;
    margin-right: 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid #cccccc;
    cursor: pointer;
  }

  .quick-nav button:last-child {
    margin-right: 0;
  }

  /* 确保您的CSS选择器能够正确选择到tooltip的popper部分 */
  .tooltipClass {
    text-align: left; /* 设置文本左对齐 */
    display: block; /* 确保内容块级显示，以便应用对齐 */
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .stat-box {
      width: 100%;
      margin-right: 0;
      margin-bottom: 0.625rem;
    }

    .left-list,
    .right-chart {
      width: 100%;
      margin-right: 0;
      margin-bottom: 1.25rem;
    }

    .quick-nav button {
      width: 100%;
      margin-bottom: 0.625rem;
    }
  }
</style>

<!--<style>-->
<!--  .myTooltipClass {-->
<!--    max-width: 300px;-->
<!--    text-align: left; /* 设置文本左对齐 */-->
<!--    display: block; /* 确保内容块级显示，以便应用对齐 */-->
<!--  }-->
<!--</style>-->
